<template>
	<view class="custom-tabbar-wrapper">
		<!-- <view class="status_bar"> </view> -->
		<view class="main-container">
			<slot></slot>
		</view>
		<u-tabbar :value="value" :fixed="true" :placeholder="false" :safeAreaInsetBottom="false" style="flex: 0"
			class="tabbar">
			<u-tabbar-item v-for="(item, index) in config" :key="index" :text="item.name"
				@click="handleTabbarClick(item.path, index)">
				<image :src="item.icon" class="i-icon" slot="active-icon" style="width: 50rpx; height: 50rpx;"></image>
				<image :src="item.icon" class="i-icon" slot="inactive-icon" style="width: 50rpx; height: 50rpx;">
				</image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		getRoutePath
	} from "../utils";


	export default {
		data() {
			return {
				config: [{
						id: 0,
						name: '线缆管理',
						// icon: '/static/cable.png',
						path: '/pages/cableManage/cableManage'
					},
					{
						id: 1,
						name: '单位转换',
						// icon: '/static/cable.png',
						path: '/pages/unit/unit'
					},
					{
						id: 2,
						name: '称重记录',
						// icon: '/static/cable.png',
						path: '/pages/weight/weight'
					},
				]
			};
		},
		methods: {
			handleTabbarClick(path, index) {
				if (this.value === index) return;
				uni.switchTab({
					url: path,
					animationType: "none",
				});
			},
		},
		computed: {
			value() {
				const path = getRoutePath();
				return this.config.find((i) => i.path === `/${path}`)?.id;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.custom-tabbar-wrapper {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-flow: column;

		// .status_bar {
		//     height: var(--status-bar-height);
		//     width: 100%;
		// }

		.main-container {
			flex: 1;
			min-height: 0;
		}

		.tabbar {

			box-shadow: 8rpx 0rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);

			.u-tabbar__content__item-wrapper {
				box-shadow: 8rpx 0rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);
			}

			.i-icon {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
</style>